<template>
  <section 
    id="container" 
    class="section-padding"
    :style="{ 
      backgroundColor: bgColor,
      '--primary-color': primaryColor,
      '--secondary-color': secondaryColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16" v-if="showHeader">
        <span class="text-primary font-medium">内容容器</span>
        <h2 class="section-title">多样化的内容展示方式</h2>
        <p class="section-subtitle">我们提供多种内容容器样式，满足不同的信息展示需求</p>
      </div>
      
      <!-- 容器网格 -->
      <div :class="gridClass">
        <div 
          v-for="(item, index) in containerItems" 
          :key="index" 
          :class="getContainerClasses(item)"
          :style="getContainerStyles(item)"
        >
          <!-- 图片容器特殊处理 -->
          <template v-if="item.type === 'image'">
            <div class="overflow-hidden" :style="{ height: item.imageHeight || '180px' }">
              <img 
                :src="item.imageUrl" 
                :alt="item.imageAlt || 'Content image'" 
                class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
              >
            </div>
          </template>
          
          <!-- 带图标的容器 -->
          <template v-if="item.hasIcon && item.type !== 'image'">
            <div class="flex items-start">
              <div 
                :class="getIconContainerClasses(item)"
                :style="getIconContainerStyles(item)"
              >
                <i :class="['fa', item.icon, getIconClasses(item)]"></i>
              </div>
              <div class="flex-1">
                <h3 class="text-lg font-bold mb-3">{{ item.title }}</h3>
                <p class="text-dark/70" v-html="item.content"></p>
                <div v-if="item.hasLink" class="mt-4">
                  <a 
                    :href="item.linkUrl || '#'" 
                    class="text-primary hover:underline"
                    @click.stop="handleLinkClick(item, $event)"
                  >
                    {{ item.linkText || '查看详情' }}
                  </a>
                </div>
              </div>
            </div>
          </template>
          
          <!-- 基础容器 -->
          <template v-if="!item.hasIcon && item.type !== 'image' && item.type !== 'data'">
            <h3 class="text-lg font-bold mb-3">{{ item.title }}</h3>
            <p class="text-dark/70 mb-4" v-html="item.content"></p>
            <div v-if="item.hasLink" :class="item.linkPosition || 'flex justify-end'">
              <a 
                :href="item.linkUrl || '#'" 
                class="text-primary hover:underline"
                @click.stop="handleLinkClick(item, $event)"
              >
                {{ item.linkText || t('defaultLinkText') }}
              </a>
            </div>
          </template>
          
          <!-- 数据统计容器 -->
          <template v-if="item.type === 'data'">
            <h3 class="text-lg font-bold mb-4">{{ item.title }}</h3>
            <div class="space-y-4">
              <div v-for="(stat, sIndex) in item.stats" :key="sIndex">
                <div class="flex justify-between mb-1">
                  <span class="text-dark/70">{{ stat.label }}</span>
                  <span class="font-medium">{{ stat.value }}</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div 
                    class="h-2 rounded-full transition-all duration-1000 ease-out"
                    :style="{ 
                      width: '0%',
                      backgroundColor: getStatBarColor(item, stat)
                    }"
                    @mounted="setStatWidth(this, stat.percentage)"
                  ></div>
                </div>
              </div>
            </div>
          </template>
          
          <!-- 图文容器内容 -->
          <template v-if="item.type === 'image'">
            <div class="p-6">
              <h3 class="text-lg font-bold mb-2">{{ item.title }}</h3>
              <p class="text-dark/70 mb-4" v-html="item.content"></p>
              <div v-if="item.hasLink">
                <a 
                  :href="item.linkUrl || '#'" 
                  class="text-primary hover:underline"
                  @click.stop="handleLinkClick(item, $event)"
                >
                  {{ item.linkText || t('defaultLinkText') }}
                </a>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ContentContainer',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'content-container',
      displayName: '内容容器模块',
      description: '提供多种样式的内容容器，用于展示不同类型的信息',
      icon: 'fa-cube',
      category: '内容展示',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'secondaryColor',
            label: '辅助色',
            type: 'color',
            defaultValue: '#36CFC9'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#f9fafb'
          },
          {
            name: 'showHeader',
            label: '显示标题区域',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '布局配置',
        fields: [
          {
            name: 'columnLayout',
            label: '列布局',
            type: 'select',
            options: [
              { label: '1列', value: '1' },
              { label: '2列', value: '2' },
              { label: '3列', value: '3' },
              { label: '自动适应', value: 'auto' }
            ],
            defaultValue: 'auto'
          },
          {
            name: 'cardGap',
            label: '卡片间距',
            type: 'number',
            min: 4,
            max: 24,
            defaultValue: 8
          },
          {
            name: 'cardRadius',
            label: '卡片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          }
        ]
      },
      {
        title: '内容配置',
        fields: [
          {
            name: 'containerItems',
            label: '容器项配置',
            type: 'array',
            description: '配置要显示的容器项',
            defaultValue: []
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'containerClick',
        label: '容器点击',
        description: '点击容器时触发',
        parameters: [
          { name: 'item', type: 'object', description: '容器项数据' },
          { name: 'index', type: 'number', description: '容器项索引' }
        ]
      },
      {
        name: 'linkClick',
        label: '链接点击',
        description: '点击容器内链接时触发',
        parameters: [
          { name: 'item', type: 'object', description: '容器项数据' },
          { name: 'event', type: 'object', description: '事件对象' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'updateItems',
        label: '更新容器项',
        description: '更新所有容器项内容',
        parameters: [
          { name: 'items', type: 'array', required: true, description: '新的容器项数组' }
        ]
      },
      {
        name: 'addItem',
        label: '添加容器项',
        description: '添加一个新的容器项',
        parameters: [
          { name: 'item', type: 'object', required: true, description: '要添加的容器项' },
          { name: 'index', type: 'number', description: '添加位置索引，默认添加到末尾' }
        ]
      },
      {
        name: 'removeItem',
        label: '移除容器项',
        description: '移除指定索引的容器项',
        parameters: [
          { name: 'index', type: 'number', required: true, description: '要移除的容器项索引' }
        ]
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    secondaryColor: {
      type: String,
      default: '#36CFC9'
    },
    bgColor: {
      type: String,
      default: '#f9fafb'
    },
    
    children: {
      type: Array,
      default: () => []
    },

    
    // 布局配置
    columnLayout: {
      type: String,
      default: 'auto',
      validator: (value) => ['1', '2', '3', 'auto'].includes(value)
    },
    cardGap: {
      type: Number,
      default: 8,
      validator: (value) => value >= 4 && value <= 24
    },
    cardRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    
    // 内容配置
    showHeader: {
      type: Boolean,
      default: true
    },
    containerItems: {
      type: Array,
      default: () => [
        {
          type: 'basic',
          title: '基础信息容器',
          content: '这是一个基础的内容容器，适合展示简单的文本信息和说明内容，保持简洁清晰的视觉效果。',
          hasLink: true,
          linkText: '查看详情',
          linkPosition: 'flex justify-end'
        },
        {
          type: 'info',
          title: '重要提示容器',
          content: '这个容器用于展示重要提示或通知信息，通过颜色和边框强调内容的重要性，吸引用户注意。',
          hasIcon: true,
          icon: 'info'
        },
        {
          type: 'success',
          title: '成功状态容器',
          content: '用于展示操作成功的信息，通过绿色系配色传达积极的反馈，增强用户体验。',
          hasIcon: true,
          icon: 'check'
        },
        {
          type: 'warning',
          title: '警告提示容器',
          content: '用于展示警告信息或需要用户注意的内容，通过黄色系配色传达需要关注的信息。',
          hasIcon: true,
          icon: 'exclamation-triangle'
        },
        {
          type: 'image',
          title: '图文内容容器',
          content: '包含图片和文字的内容容器，适合展示产品信息、新闻资讯等需要图文结合的内容。',
          hasLink: true,
          linkText: '了解更多',
          imageUrl: 'https://picsum.photos/seed/container/600/400',
          imageAlt: '容器图片示例'
        },
        {
          type: 'data',
          title: '数据统计容器',
          stats: [
            { label: '系统使用率', value: '96.8%', percentage: 96.8 },
            { label: '数据完整性', value: '92.5%', percentage: 92.5 },
            { label: '用户活跃度', value: '87.3%', percentage: 87.3 }
          ]
        }
      ]
    },
    

  },
  
  computed: {
    // 网格布局类名
    gridClass() {
      let columns = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
      
      switch (this.columnLayout) {
        case '1':
          columns = 'grid-cols-1 max-w-2xl mx-auto';
          break;
        case '2':
          columns = 'grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto';
          break;
        case '3':
          columns = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto';
          break;
        default: // auto
          columns = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto';
      }
      
      return `${columns} gap-${this.cardGap}`;
    }
  },
  
  methods: {
    /**
     * 获取容器样式类
     */
    getContainerClasses(item) {
      let baseClasses = 'rounded-xl p-6 shadow-sm transition-all duration-300 hover:shadow-md';
      
      switch (item.type) {
        case 'basic':
          return `${baseClasses} bg-white cursor-pointer`;
        case 'info':
          return `${baseClasses} bg-primary/5 border border-primary/20 cursor-pointer`;
        case 'success':
          return `${baseClasses} bg-green-50 border border-green-200 cursor-pointer`;
        case 'warning':
          return `${baseClasses} bg-yellow-50 border border-yellow-200 cursor-pointer`;
        case 'image':
          return `${baseClasses} bg-white overflow-hidden cursor-pointer`;
        case 'data':
          return `${baseClasses} bg-white cursor-pointer`;
        default:
          return `${baseClasses} bg-white cursor-pointer`;
      }
    },
    
    /**
     * 获取容器样式
     */
    getContainerStyles(item) {
      return {
        borderRadius: `${this.cardRadius}px`
      };
    },
    
    /**
     * 获取图标容器样式类
     */
    getIconContainerClasses(item) {
      return 'w-10 h-10 rounded-full flex items-center justify-center mr-4 flex-shrink-0';
    },
    
    /**
     * 获取图标容器样式
     */
    getIconContainerStyles(item) {
      switch (item.type) {
        case 'info':
          return { backgroundColor: `${this.primaryColor}10` };
        case 'success':
          return { backgroundColor: 'rgba(16, 185, 129, 0.1)' };
        case 'warning':
          return { backgroundColor: 'rgba(245, 158, 11, 0.1)' };
        default:
          return { backgroundColor: `${this.primaryColor}10` };
      }
    },
    
    /**
     * 获取图标样式类
     */
    getIconClasses(item) {
      switch (item.type) {
        case 'info':
          return 'text-primary';
        case 'success':
          return 'text-green-600';
        case 'warning':
          return 'text-yellow-600';
        default:
          return 'text-primary';
      }
    },
    
    /**
     * 获取统计条颜色
     */
    getStatBarColor(item, stat) {
      if (stat.color) return stat.color;
      if (item.barColor) return item.barColor;
      return this.primaryColor;
    },
    
    /**
     * 设置统计条宽度（带动画效果）
     */
    setStatWidth(element, percentage) {
      // 使用setTimeout确保DOM已渲染
      setTimeout(() => {
        element.style.width = `${percentage}%`;
      }, 100);
    },
    
    /**
     * 处理容器点击
     */
    handleContainerClick(item, index, e) {
      // 如果点击的是链接，不触发容器点击事件
      if (e.target.tagName === 'A') return;
      this.$emit('containerClick', item, index);
    },
    
    /**
     * 处理链接点击
     */
    handleLinkClick(item, e) {
      this.$emit('linkClick', item, e);
      
      // 如果是外部链接或邮件/电话链接，使用默认行为
      const href = item.linkUrl || '#';
      if (href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:')) {
        return true;
      }
      
      // 内部链接阻止默认行为，由父组件处理
      e.preventDefault();
      return false;
    },
    
    /**
     * 更新容器项
     */
    updateItems(items) {
      if (Array.isArray(items)) {
        this.containerItems = items;
      }
    },
    
    /**
     * 添加容器项
     */
    addItem(item, index) {
      if (typeof item === 'object') {
        const newItems = [...this.containerItems];
        if (typeof index === 'number' && index >= 0 && index <= newItems.length) {
          newItems.splice(index, 0, item);
        } else {
          newItems.push(item);
        }
        this.containerItems = newItems;
      }
    },
    
    /**
     * 移除容器项
     */
    removeItem(index) {
      if (typeof index === 'number' && index >= 0 && index < this.containerItems.length) {
        const newItems = [...this.containerItems];
        newItems.splice(index, 1);
        this.containerItems = newItems;
      }
    }
  }
};
</script>

<style scoped>
/* 主题色适配 */
.text-primary {
  color: var(--primary-color) !important;
}

/* 基础样式 */
.section-padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  line-height: 1.6;
}

/* 容器交互样式 */
.container-hover {
  transition: all 0.3s ease;
}

.container-hover:hover {
  transform: translateY(-3px);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
}
</style>
    